<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>会员登录</title>
    <link rel="stylesheet" type="text/css" href="/css/login.css">
</head>
<body>
<!-- login -->
<div class="top center">
    <div class="logo center">
        <a href="/views/index.html" target="_blank"><img src="/image/mistore_logo.png" alt=""></a>
    </div>
</div>

<form method="post" action="/login" class="form center">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">会员登录</div>
                <div class="right fr">您还不是我们的会员？<a href="/views/register" target="_self">立即注册</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="login_main center" id="loginApp">
                <div class="username">用户名:&nbsp;<input class="shurukuang" type="text" name="username"
                                                       placeholder="请输入你的用户名"
                                                        v-model="username" /></div>
                <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="shurukuang" type="password"
                                                                              name="password" placeholder="请输入你的密码" v-model="password"/>
                </div>
            </div>
            <div class="login_submit">
                <input class="submit" type="submit" name="submit" value="立即登录" >
            </div>

        </div>
    </div>
</form>

<footer>
    <div class="copyright">简体 | 繁体 | English | 常见问题</div>
    <div class="copyright">小米公司版权所有-京ICP备10046444-<img src="/image/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号
    </div>
</footer>

<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let vm = new Vue({
        el: "form",
        data: {
            // user: {}
        },
        methods: {
            login: function () {
                let data = new FormData(document.querySelector("form"));
                axios.post("/login", data).then(function (response) {
                    if (response.data.success == true) {
                        alert("接收到的数据信息为：--"+response.data.msg)
                        // vm.user =response.data;
                        location.href = "/views/index.html";
                    } else {
                        alert(response.data.msg)
                    }
                })
            }
        }
    })

    // let loginApp = new Vue({
    //     el:"#loginApp",
    //     data:{
    //         username:"",
    //         password:""
    //     },
    //     methods:{
    //         login:function () {
    //             //这里向auth发送请求，希望登录成功时能获得令牌
    //             let form = new FormData();
    //             form.append("client_id","knows");
    //             form.append("client_secret","123456");
    //             form.append("grant_type","password");
    //             form.append("username",this.username);
    //             form.append("password",this.password);
    //             axios({
    //                 url:"http://localhost:9000/oauth/token",
    //                 method:"post",
    //                 data:form
    //             }).then(function (response) {
    //                 alert(response.data.access_token);
    //             })
    //         }
    //     }
    // })

</script>

</body>
</html>